<template>
  <div class='container'>
    <question-check :ShowCheckDialog.sync='ShowCheckDialog' @submitCheck='submitCheck' @getList='getList'></question-check>
    <questions-preview :ShowDialog.sync='ShowDialog' :previewList='previewList' :options='options'></questions-preview>
<el-card class="box-card">
  <!-- 头部新增试题按钮和文字说明 -->
  <div class="boxcard-header">
    <span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
    <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push({ path: 'new' })">新增试题</el-button>
  </div>
  <!-- 表单 -->
  <el-form :inline="true" :model="formInline" style="margin-top:10px" ref="formRefs">
    <el-row :gutter="20">
  <el-col :span="6">
    <el-form-item label="学科">
      <el-select v-model="formInline.subject" placeholder="请选择"  @change="getsecondList(formInline.subject)">
          <el-option  v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="二级目录" >
      <el-select v-model="formInline.catalogID" placeholder="请选择" value='qwe'>
      <el-option v-for="item in secondList" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6"> <el-form-item label="标签" >
      <el-select v-model="formInline.tags" placeholder="请选择">
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6"> <el-form-item label="关键字" >
       <el-input v-model="formInline.keyword" placeholder="根据题干搜索"></el-input>
  </el-form-item>
  </el-col>
</el-row>

 <el-row :gutter="20">
  <el-col :span="6">
    <el-form-item label="试题类型" >
      <el-select v-model="formInline.questionType" placeholder="请选择" >
       <el-option v-for="item in questionTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6"> <el-form-item label="难度" >
      <el-select v-model="formInline.difficulty" placeholder="请选择" >
      <el-option v-for="item in difficultys" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6"> <el-form-item label="方向" >
      <el-select v-model="formInline.direction" placeholder="请选择" >
      <el-option v-for="(item,index) in direCtion" :key="index" :value="item"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6"> <el-form-item label="录入人" >
      <el-select v-model="formInline.creatorID" placeholder="请选择" >
      <el-option v-for="item in creatorIDs" :key="item.id" :label="item.username" :value="item.username"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
</el-row>
    <el-row :gutter="20 ">
<el-col :span="6">
  <el-form-item label="题目备注" >
       <el-input  placeholder="根据题目搜索" v-model="formInline.remarks" ></el-input>
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="企业简称" >
       <el-input  placeholder="根据题目搜索" v-model="formInline.shortName" ></el-input>
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="城市" label-width:20px class="city">
       <el-select v-model="formInline.province" placeholder="请选择"  @change="getCityList(formInline.province)" class="min-selected" style="width: 48%; margin-right: 2%;">
      <el-option v-for="(item,index) in provinces" :key="index" :value="item" :label="item" ></el-option>
    </el-select>
     <el-select v-model="formInline.city" placeholder="请选择" class="min-selected" style="width: 48%;">
      <el-option v-for="(item,index) in area" :key="index" :value="item" :label="item" ></el-option>
    </el-select>
  </el-form-item>
  </el-col >
   <el-col :span="6">
  <el-form-item  class="buttonpadding">
    <el-button size="small" @click="clearDialog">清除</el-button>
    <el-button type="primary" size="small" @click="serchData">搜索</el-button>
  </el-form-item>
    </el-col >
</el-row>
</el-form>

<el-tabs type="border-card" @tab-click="handleClick">
<!-- 全部 -->
  <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.value">
    <!-- 数据总条数 -->
    <el-alert
    :title="totalNumber"
    type="info"
    show-icon>
  </el-alert>
  <!-- 表格 -->
   <el-table
    :data="list"
    stripe
    header-cell-class-name="table_header"
    style="width: 100%">
    <el-table-column  prop="number" label="试题编号" width="150"> </el-table-column>
    <el-table-column prop="subject" label="学科" width="100"> </el-table-column>
    <el-table-column prop="catalog" label="目录" width="100"> </el-table-column>
    <el-table-column prop="questionType"  label="题型"  width="100">
        <template #default={row}>
            <span v-if="+row.questionType === 1">单选 </span>
            <span v-else-if="+row.questionType ===2">多选</span>
            <span v-else>简答题</span>
        </template>
    </el-table-column>
    <el-table-column prop="question" label="题干"  width="300">
       <template slot-scope="scope">
          <div v-html="scope.row.question"></div>
        </template>
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间" width="200">
      <template #default={row}>
          {{row.addDate | parseTimeByString}}
      </template>
    </el-table-column>
   <el-table-column  prop="difficulty"  label="难度"  width="120">
      <template #default={row}>
        <span v-if="+row.difficulty === 1">简单 </span>
        <span v-else-if="+row.difficulty === 2">一般</span>
        <span v-else>困难</span>
      </template>
    </el-table-column>
     <el-table-column  prop="creator"  label="录入人"  width="120"> </el-table-column>
     <el-table-column  prop="chkState"  label="审核状态"  width="120">
        <template #default={row}>
            <span v-if="+row.chkState === 0">待审核 </span>
            <span v-else-if="+row.chkState === 1">通过</span>
            <span v-else>拒绝</span>
        </template>
    </el-table-column>
     <el-table-column  prop="chkRemarks"  label="审核意见"  width="120"></el-table-column>
    <el-table-column  prop="chkUser"  label="审核人"  width="120"></el-table-column>
     <el-table-column  prop="publishState"  label="发布状态"  width="120">
        <template #default={row}>
            <span v-if="+row.publishState === 0">待发布 </span>
            <span v-else>已发布</span>
        </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
        <template #default='{row}'>
            <el-button type="text" size="small" @click="clickShowDialog(row.id)">预览</el-button>
            <el-button type="text" size="small" @click="clickShowCheckDialog(row.id)" :disabled='row.chkState!==0'>审核</el-button>
            <el-button type="text" size="small" @click='changeList(row.id)'>修改</el-button>
            <el-button type="text" size="small" v-if="!row.publishState" @click="changePublish(row.id,row.publishState,'上架')">上架</el-button>
            <el-button type="text" size="small" v-else @click="changePublish(row.id,row.publishState,'下架')">下架</el-button>
            <el-button type="text" size="small" @click="closeListData(row.id)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
     </el-tab-pane>
  </el-tabs>
  <!-- 分页 -->
    <el-pagination
      style="float:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      :page-size='+pageSize'
      :current-page='+page'
      :total="+total"
      background
      layout=" prev, pager, next, sizes,jumper"
      >
    </el-pagination>
</el-card>
  </div>
</template>

<script>
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import { choice, remove, choicePublish, choiceCheck, detail } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as simples } from '@/api/hmmm/directorys'
import { simple as user } from '@/api/base/users'
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import questionCheck from '../components/questions-choice/question-check.vue'

export default {
  components: { questionCheck, questionsPreview },
  name: 'Mydata',
  data () {
    return {
      list: [],
      total: '',
      flag: 0,
      formInline: {
        subject: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市
        city: '' // 地区
      },
      subjectList: [],
      secondList: [],
      direCtion: direction,
      provinces: provinces(),
      area: [],
      difficultys: difficulty,
      questionTypes: questionType,
      creatorIDs: [],
      pageSize: 5,
      page: 1,
      tabs: [
        { id: 1, value: '全部 ' },
        { id: 2, value: '待审核 ' },
        { id: 3, value: '已审核 ' },
        { id: 4, value: '已拒绝 ' }
      ],
      ShowCheckDialog: false,
      checkID: '',
      ShowDialog: false,
      previewList: {},
      options: []
    }
  },
  created () {
    this.getList()
    this.getSubjectList()
    this.getDataUser()
  },
  mounted () {
  },
  methods: {
    // 请求列表数据
    async getList () {
      const { data } = await choice({
        pagesize: this.pageSize,
        page: this.page
      })
      this.list = data.items
      this.total = data.counts
    },
    // 表格下一页
    handleCurrentChange (val) {
      this.page = val
      this.getList()
    },
    // 当前页条数
    handleSizeChange (val) {
      this.pageSize = val
      if (this.formInline.subject || this.formInline.keyword) {
        return this.serchData()
      }
      this.getList()
    },
    // 获取学科下拉框
    async getSubjectList () {
      const { data } = await simple()
      this.subjectList = data
    },
    // 获取二级目录下拉框
    async getsecondList (id) {
      this.formInline.catalogID = ''
      const { data } = await simples({ subject: id })
      this.secondList = data
    },
    // 获得地区下拉框
    getCityList (province) {
      this.formInline.city = ''
      const area = citys(province)
      this.area = area
    },
    // 获取录入人
    async getDataUser () {
      const { data } = await user()
      this.creatorIDs = data
    },
    // 根据条件搜索
    async serchData () {
      if (this.formInline.subject && !this.formInline.keyword) {
        const { data } = await choice({
          subjectID: this.formInline.subject,
          page: this.page,
          pagesize: 1000
        })
        this.list = data.items
        this.total = data.counts
      } else if (this.formInline.keyword && !this.formInline.subject) {
        const { data } = await choice({
          keyword: this.formInline.keyword,
          page: this.page,
          pagesize: 1000
        })
        this.list = data.items
        this.total = data.counts
      } else if (this.formInline.subject && this.formInline.keyword) {
        const { data } = await choice({
          keyword: this.formInline.keyword,
          subjectID: this.formInline.subject,
          page: this.page,
          pagesize: 1000
        })
        this.list = data.items
        this.total = data.counts
      } else {
        const { data } = await choice({
          page: this.page,
          pagesize: 1000
        })
        this.list = data.items
        this.total = data.counts
      }
      return this.list
    },
    // tab栏点击
    async handleClick (tab, event) {
      this.flag = +tab.index
      // 点击tab栏有搜索条件时
      if (this.formInline.subject || this.formInline.keyword) {
        const newList = await this.serchData()
        if (this.flag === 1) {
          this.list = newList.filter(item => item.chkState === 0)
        } else if (this.flag === 2) {
          this.list = newList.filter(item => item.chkState === 1)
        } else if (this.flag === 3) {
          this.list = newList.filter(item => item.chkState === 2 || item.chkState === 3)
        } else {
          this.list = newList
        }
        this.total = this.list.length
      } else { // 点击tab栏没有搜索条件时
        const { data } = await choice({
          pagesize: 1000,
          page: this.page
        })
        if (this.flag === 1) {
          this.list = data.items.filter(item => item.chkState === 0)
        } else if (this.flag === 2) {
          this.list = data.items.filter(item => item.chkState === 1)
        } else if (this.flag === 3) {
          this.list = data.items.filter(item => item.chkState === 2 || item.chkState === 3)
        } else {
          this.list = data.items
        }
        this.total = this.list.length
      }
    },
    clearDialog () {
      this.formInline = {
        subject: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市
        city: '' // 地区
      }
      this.getList()
    },
    // 打开审核组件
    clickShowCheckDialog (id) {
      this.ShowCheckDialog = true
      this.checkID = id
    },
    // 打开题目预览
    async clickShowDialog (id) {
      const { data: { items } } = await choice({
        pagesize: this.pageSize,
        page: this.page
      })
      this.ShowDialog = true
      const o = items.find(item => item.id === id)
      this.previewList = o
      const { data: { options } } = await detail({ id })
      this.options = options
    },
    // 删除数据
    closeListData (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success({ message: '删除成功!' })
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.getList()
      }).catch(() => {
        this.$message.error({ message: '已取消删除' })
      })
    },
    // 修改数据
    changeList (id) {
      this.$router.push({ path: 'new', query: { id } })
    },
    // 上下架数据
    async changePublish (id, state, text) {
      this.$confirm(`是否${text}?`, '提示', {
        type: 'warning'
      }).then(async () => {
        this.$message.success({ message: `${text}成功!` })
        state = !state
        if (state === false) {
          state = 0
        } else {
          state = 1
        }
        await choicePublish({ id: id, publishState: state })
        this.getList()
      }).catch(() => {
        this.$message.error({ message: `已取消${text}` })
      })
    },
    async submitCheck (data) {
      await choiceCheck({
        id: this.checkID,
        chkState: +data.radio,
        chkRemarks: data.chkRemarks
      })
    }
  },
  computed: {
    totalNumber () {
      return `数据一共 ${this.total} 条`
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  margin: 10px;
}
.box-card {
  padding: 5px 10px;
  .boxcard-header{
    display: flex;
    justify-content: space-between;
  }
  .el-select{
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
  ::v-deep{
    .buttonpadding .el-form-item__content{
      display: flex !important;
      justify-content:flex-end !important
    }
    .el-form-item{
       width: 100% ;
       display: flex;
      justify-content: space-between;
    }
      .el-form-item__label{
        width:70px ;
      }
      .el-form-item__content{
        flex:1 !important;
         .el-input--suffix{
            width: 100% !important;
            .el-input{
                width: 100% !important;
            }
         }
      }
    .el-table{
      margin-top: 15px;
    }
    .table_header{
      background-color:#fafafa;
      border-bottom: 5px solid #bbbaba;
    }
    .el-pagination{
       padding: 20px 0;
    }
    .city{
      .el-form-item__content{
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
